<template>
    <div class="xbsj_box" id="xbsj_box">
        <!-- 导航以及模块面板 -->
        <div class="xbsj_header">
            <Menu :navList="navList" :navType="navType"></Menu>
        </div>
        <!-- 视口 -->
        <div class="xbsj_earth" ref="xbsjEarth">
            <ViewersComp></ViewersComp>
        </div>
        <!-- 场景树 -->
        <DraggablePopup2 v-if="showSceneTreeViewRef" @close="showSceneTreeViewRef = false" :title="'图层管理'" :width="280"
            :height="'410px'" :left="0" :top="40" :iconName="'tucengguanli'" :checkIconIsShow="true"
            :iconIschecked="showCheckBox" :checkFun="() => showCheckBox = !showCheckBox">
            <SceneTree v-if="!!sceneTree" :showCheckBox="showCheckBox"></SceneTree>
        </DraggablePopup2>
        <!-- 属性栏 -->
        <DraggablePopup2 v-if="propSceneTree" :title="propSceneTree ? propSceneTree.name + '属性面板' : '属性面板'" :width="280"
            :height="'370px'" :left="0" :top="482" @close="propSceneTree = undefined">
            <ESPropPanel :treeItem="propSceneTree" :key="propSceneTree" :propTreeRef=propTreeRef
                @callback="propTreeCallback"></ESPropPanel>
        </DraggablePopup2>

        <!-- 时间线 -->
        <TimeLine v-show="animationShow"></TimeLine>
        <!-- 拾取面板 -->
        <!-- <CzmPickResult @close="czmPickResult = false" :list="czmPinkList" v-if="czmPickResult"></CzmPickResult> -->
        <!-- <UePickResult :jsonResult="uePinkjson" @close="uePickResult = false" v-if="uePickResult"></UePickResult> -->
        <!-- 状态栏 指北针 比例尺-->
        <StatusBar v-if="statusBarShow"></StatusBar>
        <Navigator v-if="navigatorShow" :navigatorScaleRight="navigatorScaleRight"></Navigator>
        <Scale v-if="scaleShow" :navigatorScaleRight="navigatorScaleRight"></Scale>
    </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, provide, ref } from "vue";
import { createVueDisposer, toReadonlyVueRef, toVR } from 'vue-xe2-plugin/dist-node/components/xe2/tools';
import DraggablePopup2 from "./components/DraggablePopup2.vue";
import ESPropPanel from './components/eSPropPanel/ESPropPanel.vue';
import SceneTree from "./components/sceneTree/SceneTree.vue";
import ViewersComp from './components/viewers/Viewers.vue';
// import { ESGeoPolygon } from "esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main";
import { analysis, engine, environment, images, model, vector, plotting, roam, terrain, view, service, driver } from './pages'
// import CzmPickResult from "./pages/roam/cousePicking/CzmPickResult.vue";
// import UePickResult from "./pages/roam/cousePicking/UePickResult.vue";
import { initSceneJson, initSceneWithType, initurl } from './scripts/initializationJson';
import { XbsjEarthUi } from './scripts/xbsjEarthUi';
import TimeLine from "./pages/view/animation/TimeLine.vue";
import { timeToTimestamp, timestampToTime } from './pages/environment/fun';
import StatusBar from "./pages/view/control/StatusBar.vue"
import Navigator from "./pages/view/control/Navigator.vue"
import Scale from "./pages/view/control/Scale.vue"
import Menu from "./views/Menu.vue";
// import { randomPoint } from '@turf/turf'
// import { SceneTree as SceneTreeTs } from "xbsj-xe2/dist-node/xe2";
// import { ESImageLabel } from "esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main";
import loImg from '@/assets/images/floower.jpg'

const props = withDefaults(defineProps<{
    newList?: any
    navType?: string
}>(), {});

const xbsjEarthUi = new XbsjEarthUi();
const sceneTree = xbsjEarthUi.getSceneTree()
xbsjEarthUi.czmlabPath = location.origin
// @ts-ignore
// window.g_xbsjEarthUi = xbsjEarthUi;
xbsjEarthUi.jsonLoadingEvent.don((e) => {
    initSceneWithType(xbsjEarthUi)
    //设置初始化时间的时间戳
    const date = timeToTimestamp(timestampToTime('12', '00'))
    if (xbsjEarthUi.activeViewer) {
        xbsjEarthUi.activeViewer.currentTime = date
    }
    if (e.type === 'loaded') { // json载入后
    //    const qiSceneObj =  xbsjEarthUi.getSceneObjectById('98730a86-aa65-49b7-89e2-aef0aa308628')
        // if (qiSceneObj) {
        //     qiSceneObj.url = loImg
        // }
       console.log(xbsjEarthUi, 'qiSceneObj', window.Cesium);
       
    }
})
// initurl(xbsjEarthUi) // 初始化地址
initSceneJson(xbsjEarthUi) // 场景json
const czmPickResult = ref(false)
const czmPinkList: any = ref()
// const uePickResult = ref(false)
// const uePinkjson: any = ref()
const { newList } = props
provide("xbsjEarthUi", xbsjEarthUi);//所有子组件都可以获取到，不用一层一层传值
provide("sceneTree", sceneTree);//所有子组件都可以获取到，不用一层一层传值

defineExpose({ objectsManager: xbsjEarthUi, sceneTree });
const propTreeCallback = xbsjEarthUi.propTreeCallback.bind(xbsjEarthUi);

const showCheckBox = ref(false)
const xbsjEarth = ref<HTMLElement>()
const disposer = createVueDisposer(onBeforeUnmount);
const showSceneTreeViewRef = toVR<boolean>(disposer, [xbsjEarthUi, "showSceneTreeView"])
const propSceneTree = toVR<any>(disposer, [xbsjEarthUi, "propSceneTree"])
const animationShow = toVR<boolean>(disposer, [xbsjEarthUi, "animationShow"])

const navigatorShow = toVR<boolean>(disposer, [xbsjEarthUi.navigatorManager, "navigatorShow"])
const scaleShow = toVR<boolean>(disposer, [xbsjEarthUi.navigatorManager, "scaleShow"])
const statusBarShow = toVR<boolean>(disposer, [xbsjEarthUi.navigatorManager, "statusBarShow"])
const navigatorScaleRight = toVR<number>(disposer, [xbsjEarthUi.navigatorManager, "navigatorScaleRight"])

const propTreeRef = toReadonlyVueRef<any>(disposer, [xbsjEarthUi.propUiTreeManager, 'propTree']);
type list = {
    id: number,
    title: string,
    value: string,
    icon: string,
    component: any
}[]
const originalList: list = [
    {
        id: 1,
        title: "漫游",
        value: 'roam',
        icon: 'manyou',
        component: roam
    },
    {
        id: 2,
        title: "视图",
        value: 'view',
        icon: 'shitu',
        component: view
    },
    {
        id: 3,
        title: "影像",
        value: 'images',
        icon: 'yingxiang',
        component: images
    },
    {
        id: 4,
        title: "瓦片",
        value: 'model',
        icon: 'wapian',
        component: model
    },
    // {
    //     id: 5,
    //     title: "地形",
    //     value: 'terrain',
    //     icon: 'dixing',
    //     component: terrain
    // },
    // {
    //     id: 6,
    //     title: "矢量",
    //     value: 'vector',
    //     icon: 'shiliang',
    //     component: vector
    // },
    {
        id: 7,
        title: "分析",
        value: 'analysis',
        icon: 'fenxi',
        component: analysis
    },
    {
        id: 8,
        title: "标绘",
        value: 'plotting',
        icon: 'biaohui',
        component: plotting
    },
    {
        id: 13,
        title: "驾驶舱",
        value: 'driver',
        icon: 'fuwu',
        component: driver
    },
    // {
    //     id: 9,
    //     title: "动画",
    //     value: 'animation',
    //     icon: 'donghua',
    //     component: animation
    // },
    // {
    //     id: 10,
    //     title: "环境",
    //     value: 'environment',
    //     icon: 'huanjing',
    //     component: environment
    // },
    // {
    //     id: 11,
    //     title: "引擎",
    //     value: 'engine',
    //     icon: 'yinqing',
    //     component: engine
    // },
    // {
    //     id: 12,
    //     title: "服务",
    //     value: 'service',
    //     icon: 'fuwu',
    //     component: service
    // },
]
let navList = originalList
if (newList) {
    navList = originalList.concat(newList)
}
onMounted(() => {
    xbsjEarthUi.d(xbsjEarthUi.cesiumPickChanged.don((val) => {
        czmPinkList.value = val
        czmPickResult.value = true
    }))
    // xbsjEarthUi.d(xbsjEarthUi.uePickChanged.don((val) => {
    //     uePinkjson.value = val
    //     uePickResult.value = true
    // }))
})


</script>

<style scoped>
.xbsj_box {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.xbsj_header {
    width: 100%;
    height: 40px;
    background-color: #2F3034;
    border-bottom: 1px solid #111111;
    box-sizing: border-box;
}

.xbsj_earth {
    width: 100%;
    height: calc(100% - 40px);
}



.es_PropPanel {
    position: absolute;
    left: -30px;
    top: 0;
    width: 30px;
    height: 30px;
    background: rgba(37, 38, 42, 1);
    border-bottom: 1px solid rgba(17, 17, 17, 1);
    border-left: 1px solid rgba(17, 17, 17, 1);
    box-sizing: border-box;
    cursor: pointer;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
